<template>
	<div class="app-container">
		<el-row class='content-container'>
			<div class="left">
				<company @choseCompany="choseCompany"></company>
			</div>
			<div class="left">
				<span class="label-titile">订单创建日期</span>
				<el-date-picker
			      v-model="reqData.starttime"
			      type="date"
			      placeholder="选择日期"
			      @change="choseStarttime">
			    </el-date-picker>
			    <span class="label-titile">至</span>
				<el-date-picker
			      v-model="reqData.endtime"
			      type="date"
			      placeholder="选择日期"
			      style="width: 200px;"
			      @change="choseEndtime">
			    </el-date-picker>
				<el-button type="primary" @click="search">搜索</el-button>
			</div>
			
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="id" label="ID" align="center" width="100px"></el-table-column>
				<el-table-column prop="companyName" label="企业名称" align="left"></el-table-column>
				<el-table-column prop="orderNumber" label="订单号" align="left"></el-table-column>
				<el-table-column prop="productName" label="产品" align="left"></el-table-column>
				<el-table-column label="类型" align="center" width="100px">
					<template slot-scope="scope">
						<span>{{scope.row.type == "1"?"新购":"续费"}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" align="center" width="200px"></el-table-column>
				<el-table-column prop="payTime" label="支付/开通时间" align="center" width="200px"></el-table-column>
				<el-table-column label="状态" align="center" width="70px">
					<template slot-scope="scope">
						<span v-show="scope.row.status == '0'">未支付</span>
						<span v-show="scope.row.status == '1'">已支付</span>
						<span v-show="scope.row.status == '2'">作废/取消</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderAmount" label="原价" align="center" width="150px"></el-table-column>
				<el-table-column prop="amount" label="应付金额" align="center" width="150px"></el-table-column>
				<el-table-column label="操作" align="center" width="200px">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="lookDetails(scope.row)">查看明细</el-button>

					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :reqData-count="totalPageSize" :reqData-sizes="[10, 20, 30, 50]" :reqData-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	
	import company from '../../components/common/company'
	import {getComanyId} from '@/utils/auth'
	import { getOrderList} from '@/api/order'
	import { safariDate, getMomentValue } from '@/utils/index'
	export default {
		name:'orderList',
		components: { company},
		data() {

			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					pageSize:"10",
					currentPage: 1,
					companyId:"",
					starttime:"",
					endtime:""
				},
				
				timeArray:[]
			}
		},
		created(){
			let companyId = getComanyId();
			if(companyId !='null'&&companyId!=0){
				this.reqData.companyId = companyId;
			}
			this.getList(this.reqData);
		},
		methods: {
			
			choseCompany(data){
				this.reqData.companyId = data;
			},
			getList(data){
				getOrderList(data).then((res)=>{
					let entity = res.entity;
					this.list = [...entity.data];
					this.totalPageSize = entity.page.totalPageSize;
					this.totalResultSize = entity.page.totalResultSize;
				});
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			choseStarttime(val){
				this.reqData.starttime = getMomentValue(val);
				
			},
			choseEndtime(val){
				this.reqData.endtime = getMomentValue(val);
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			lookDetails(item){
				this.$router.push({
					path:"/orderDetails/details",
					query:{
						orderId:item.id,
						companyId: item.companyId
					}
				})
				
			}

		}
	}
</script>

<style>

</style>